<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 游戏装备数据
const products = ref([
  {
    id: 1,
    name: '黑切石镰',
    price: 3000,
    originalPrice: 3500,
    discount: '8.6折',
    image: 'https://picsum.photos/seed/黑切石镰/400/300',
    category: '攻击装备',
    rating: 4.9,
    sales: 1890
  },
  {
    id: 2,
    name: '吸血魔节杖',
    price: 1200,
    originalPrice: 1500,
    discount: '8折',
    image: 'https://picsum.photos/seed/吸血魔节杖/400/300',
    category: '攻击装备',
    rating: 4.7,
    sales: 2560
  },
  {
    id: 3,
    name: '饮血剑',
    price: 3400,
    originalPrice: 3800,
    discount: '8.9折',
    image: 'https://picsum.photos/seed/饮血剑/400/300',
    category: '攻击装备',
    rating: 4.8,
    sales: 3200
  },
  {
    id: 4,
    name: '贪欲九头蛇',
    price: 3300,
    originalPrice: 3600,
    discount: '9.2折',
    image: 'https://picsum.photos/seed/贪欲九头蛇/400/300',
    category: '攻击装备',
    rating: 4.6,
    sales: 1980
  },
  {
    id: 5,
    name: '水银弯刀',
    price: 2800,
    originalPrice: 3200,
    discount: '8.8折',
    image: 'https://picsum.photos/seed/水银弯刀/400/300',
    category: '攻击装备',
    rating: 4.7,
    sales: 2100
  },
  {
    id: 6,
    name: '海克斯科技枪刃',
    price: 3100,
    originalPrice: 3500,
    discount: '8.9折',
    image: 'https://picsum.photos/seed/海克斯科技枪刃/400/300',
    category: '攻击装备',
    rating: 4.8,
    sales: 1750
  },
  {
    id: 7,
    name: '破败王者之刃',
    price: 3200,
    originalPrice: 3600,
    discount: '8.9折',
    image: 'https://picsum.photos/seed/破败王者之刃/400/300',
    category: '攻击装备',
    rating: 4.9,
    sales: 2890
  },
  {
    id: 8,
    name: '玛莫提乌斯之噬',
    price: 3000,
    originalPrice: 3400,
    discount: '8.8折',
    image: 'https://picsum.photos/seed/玛莫提乌斯之噬/400/300',
    category: '攻击装备',
    rating: 4.7,
    sales: 1650
  },
  {
    id: 9,
    name: '守护天使',
    price: 2800,
    originalPrice: 3200,
    discount: '8.8折',
    image: 'https://picsum.photos/seed/守护天使/400/300',
    category: '防御装备',
    rating: 4.8,
    sales: 3100
  },
  {
    id: 10,
    name: '兰顿之兆',
    price: 2700,
    originalPrice: 3100,
    discount: '8.7折',
    image: 'https://picsum.photos/seed/兰顿之兆/400/300',
    category: '防御装备',
    rating: 4.6,
    sales: 2450
  },
  {
    id: 11,
    name: '灭世者的死亡之帽',
    price: 3600,
    originalPrice: 4000,
    discount: '9折',
    image: 'https://ddragon.leagueoflegends.com/cdn/13.24.1/img/item/3089.png',
    category: '法术装备',
    rating: 4.9,
    sales: 2850
  },
  {
    id: 12,
    name: '兰德里的苦楚',
    price: 3100,
    originalPrice: 3500,
    discount: '8.9折',
    image: 'https://ddragon.leagueoflegends.com/cdn/13.24.1/img/item/31259.png',
    category: '法术装备',
    rating: 4.7,
    sales: 2100
  },
  {
    id: 13,
    name: '中娅沙漏',
    price: 2900,
    originalPrice: 3300,
    discount: '8.8折',
    image: 'https://ddragon.leagueoflegends.com/cdn/13.24.1/img/item/3157.png',
    category: '法术装备',
    rating: 4.8,
    sales: 3200
  },
  {
    id: 14,
    name: '瑞莱的冰晶节杖',
    price: 2800,
    originalPrice: 3200,
    discount: '8.8折',
    image: 'https://ddragon.leagueoflegends.com/cdn/13.24.1/img/item/3116.png',
    category: '法术装备',
    rating: 4.6,
    sales: 2500
  },
  {
    id: 15,
    name: '虚空之杖',
    price: 3000,
    originalPrice: 3400,
    discount: '8.8折',
    image: 'https://ddragon.leagueoflegends.com/cdn/13.24.1/img/item/3135.png',
    category: '法术装备',
    rating: 4.7,
    sales: 2350
  }
])

// 分类数据
const categories = ref([
  { id: 'all', name: '全部' },
  { id: '攻击装备', name: '攻击装备' },
  { id: '防御装备', name: '防御装备' },
  { id: '法术装备', name: '法术装备' }
])

// 当前选中的分类
const selectedCategory = ref('all')

// 购物车数据
const cartItems = ref([])

// 收藏的商品
const favoriteProducts = ref([])

// 筛选后的商品
const filteredProducts = ref([])

// 搜索关键词
const searchKeyword = ref('')

// 监听分类和搜索变化，更新筛选结果
const updateFilteredProducts = () => {
  filteredProducts.value = products.value.filter(product => {
    const categoryMatch = selectedCategory.value === 'all' || product.category === selectedCategory.value
    const keywordMatch = !searchKeyword.value || product.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    return categoryMatch && keywordMatch
  })
}

// 添加商品到购物车
const addToCart = (product) => {
  // 检查商品是否已在购物车中
  const existingItem = cartItems.value.find(item => item.id === product.id)
  
  if (existingItem) {
    existingItem.quantity += 1
  } else {
    cartItems.value.push({ ...product, quantity: 1 })
  }
  
  // 保存购物车到本地存储
  localStorage.setItem('cart', JSON.stringify(cartItems.value))
  
  // 显示添加成功提示
  showToast(`已将${product.name}添加到购物车`)
}

// 显示提示信息
const showToast = (message) => {
  const toast = document.createElement('div')
  toast.className = 'mall-toast'
  toast.textContent = message
  document.body.appendChild(toast)
  
  // 添加动画
  setTimeout(() => {
    toast.classList.add('show')
  }, 10)
  
  // 3秒后移除
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => {
      document.body.removeChild(toast)
    }, 300)
  }, 3000)
}

// 计算购物车总价
const cartTotal = () => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
}

// 计算购物车商品总数
const cartItemCount = () => {
  return cartItems.value.reduce((total, item) => total + item.quantity, 0)
}

// 检查商品是否已收藏
const isProductFavorited = (productId) => {
  return favoriteProducts.value.some(item => item.id === productId)
}

// 添加/移除商品收藏
const toggleFavorite = (product) => {
  const index = favoriteProducts.value.findIndex(item => item.id === product.id)
  
  if (index === -1) {
    // 添加到收藏
    favoriteProducts.value.push(product)
    showToast(`已收藏${product.name}`)
  } else {
    // 移除收藏
    favoriteProducts.value.splice(index, 1)
    showToast(`已取消收藏${product.name}`)
  }
  
  // 保存收藏到本地存储
  localStorage.setItem('favorites', JSON.stringify(favoriteProducts.value))
}

// 加载购物车数据
const loadCart = () => {
  const savedCart = localStorage.getItem('cart')
  if (savedCart) {
    cartItems.value = JSON.parse(savedCart)
  }
}

// 加载收藏数据
const loadFavorites = () => {
  const savedFavorites = localStorage.getItem('favorites')
  if (savedFavorites) {
    favoriteProducts.value = JSON.parse(savedFavorites)
  }
}

// 组件挂载时执行
onMounted(() => {
  // 检查用户是否已登录
  const isLoggedIn = localStorage.getItem('isLoggedIn') || sessionStorage.getItem('isLoggedIn')
  if (!isLoggedIn) {
    router.push('/login')
  }
  
  updateFilteredProducts()
  loadCart()
  loadFavorites()
})
</script>

<template>
  <div class="mall-container">
    <!-- 顶部导航 -->
    <header class="mall-header">
      <div class="header-top">
        <div class="container">
          <div class="header-links">
            <router-link to="/profile" class="link-item">个人主页</router-link>
            <router-link to="/cart" class="link-item">购物车</router-link>
            <router-link to="/favorites" class="link-item">收藏夹</router-link>
            <a href="#" class="link-item">我的订单</a>
          </div>
        </div>
      </div>
      
      <div class="header-main">
        <div class="container">
          <div class="logo">初遇小店</div>
          
          <div class="search-box">
            <input 
              type="text" 
              placeholder="搜索商品" 
              v-model="searchKeyword" 
              @input="updateFilteredProducts"
              class="search-input"
            >
            <button class="search-button">搜索</button>
          </div>
          
          <router-link to="/cart" class="cart-icon" @click.stop>
            <i class="cart-icon-svg">🛒</i>
            <span class="cart-count" v-if="cartItemCount() > 0">{{ cartItemCount() }}</span>
          </router-link>
        </div>
      </div>
      
      <div class="header-categories">
        <div class="container">
          <div 
            v-for="category in categories" 
            :key="category.id"
            :class="['category-item', { active: selectedCategory === category.id }]"
            @click="selectedCategory = category.id; updateFilteredProducts()"
          >
            {{ category.name }}
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="mall-main">
      <div class="container">
        <!-- 轮播图 -->
        <div class="banner-carousel">
          <img src="https://picsum.photos/seed/banner/1200/400" alt="促销活动" class="banner-image">
          <div class="banner-text">
            <h2>年中大促</h2>
            <p>全场商品低至5折起</p>
            <button class="banner-button">立即查看</button>
          </div>
        </div>

        <!-- 商品网格 -->
        <div class="products-grid">
          <div 
            v-for="product in filteredProducts" 
            :key="product.id"
            class="product-card"
          >
            <div class="product-image-container">
              <img :src="product.image" :alt="product.name" class="product-image">
              <div class="product-discount">{{ product.discount }}</div>
              <button 
                class="favorite-button" 
                :class="{ favorited: isProductFavorited(product.id) }"
                @click.stop="toggleFavorite(product)"
                title="{{ isProductFavorited(product.id) ? '取消收藏' : '收藏' }}"
              >
                {{ isProductFavorited(product.id) ? '❤' : '♡' }}
              </button>
            </div>
            
            <h3 class="product-name">{{ product.name }}</h3>
            
            <div class="product-rating">
              <span class="rating-stars">★★★★★</span>
              <span class="rating-score">{{ product.rating }}</span>
              <span class="sales-count">({{ product.sales }}人已购)</span>
            </div>
            
            <div class="product-price">
              <span class="current-price">¥{{ product.price }}</span>
              <span class="original-price">¥{{ product.originalPrice }}</span>
            </div>
            
            <div class="product-actions">
              <button 
                class="add-to-cart-button"
                @click="addToCart(product)"
              >
                加入购物车
              </button>
              <button 
                class="favorite-btn"
                :class="{ favorited: isProductFavorited(product.id) }"
                @click="toggleFavorite(product)"
                title="{{ isProductFavorited(product.id) ? '取消收藏' : '收藏' }}"
              >
                {{ isProductFavorited(product.id) ? '❤' : '♡' }}
                {{ isProductFavorited(product.id) ? '已收藏' : '收藏' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 购物车侧边栏 -->
    <div class="cart-sidebar" :class="{ open: showCart }">
      <div class="cart-header">
        <h3>购物车 ({{ cartItemCount() }})</h3>
        <button class="close-cart" @click="showCart = false">×</button>
      </div>
      
      <div class="cart-items">
        <div v-if="cartItems.length === 0" class="empty-cart">
          <p>购物车还是空的，快去挑选商品吧！</p>
        </div>
        
        <div v-for="item in cartItems" :key="item.id" class="cart-item">
          <img :src="item.image" :alt="item.name" class="cart-item-image">
          <div class="cart-item-info">
            <div class="cart-item-name">{{ item.name }}</div>
            <div class="cart-item-price">¥{{ item.price }}</div>
            <div class="cart-item-quantity">
              <button @click="item.quantity > 1 && (item.quantity -= 1)">-</button>
              <span>{{ item.quantity }}</span>
              <button @click="item.quantity += 1">+</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="cart-footer">
        <div class="cart-summary">
          <span>合计：</span>
          <span class="cart-total">¥{{ cartTotal() }}</span>
        </div>
        <button class="checkout-button" :disabled="cartItems.length === 0">
          去结算
        </button>
      </div>
    </div>

    <!-- 购物车蒙层 -->
    <div class="cart-overlay" :class="{ show: showCart }" @click="showCart = false"></div>

    <!-- 页脚 -->
    <footer class="mall-footer">
      <div class="container">
        <div class="footer-links">
          <div class="footer-column">
            <h4>购物指南</h4>
            <ul>
              <li><a href="#">注册与登录</a></li>
              <li><a href="#">购物流程</a></li>
              <li><a href="#">支付方式</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>配送服务</h4>
            <ul>
              <li><a href="#">配送范围</a></li>
              <li><a href="#">配送时间</a></li>
              <li><a href="#">配送费用</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>售后服务</h4>
            <ul>
              <li><a href="#">退换货政策</a></li>
              <li><a href="#">退款说明</a></li>
              <li><a href="#">售后保障</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>联系我们</h4>
            <ul>
              <li>客服电话：400-123-4567</li>
              <li>工作时间：9:00-22:00</li>
              <li>邮箱：service@example.com</li>
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2024 初遇小店 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 商城容器 */
.mall-container {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 顶部导航 */
.mall-header {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-top {
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.header-links {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
}

.link-item {
  color: #666;
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
  transition: color 0.3s;
}

.link-item:hover {
  color: #ff4400;
}

.header-main {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  color: #ff4400;
  cursor: pointer;
}

.search-box {
  flex: 1;
  max-width: 600px;
  margin: 0 40px;
  position: relative;
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 2px solid #ff4400;
  border-radius: 20px 0 0 20px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
}

.search-input:focus {
  border-color: #ff6600;
}

.search-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  padding: 0 20px;
  background: #ff4400;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.search-button:hover {
  background: #ff6600;
}

.cart-icon {
  position: relative;
  cursor: pointer;
  font-size: 24px;
}

.cart-icon-svg {
  display: inline-block;
  width: 30px;
  height: 30px;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4400;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.header-categories {
  border-top: 1px solid #e0e0e0;
}

.category-item {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

.category-item:hover {
  color: #ff4400;
}

.category-item.active {
  color: #ff4400;
  border-bottom: 3px solid #ff4400;
}

/* 主要内容 */
.mall-main {
  flex: 1;
  padding: 20px 0;
}

.banner-carousel {
  position: relative;
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-text h2 {
  font-size: 48px;
  margin-bottom: 16px;
  font-weight: 700;
}

.banner-text p {
  font-size: 24px;
  margin-bottom: 24px;
}

.banner-button {
  background: #ff4400;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

.banner-button:hover {
  background: #ff6600;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 68, 0, 0.3);
}

/* 商品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff4400;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rating {
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.rating-stars {
  color: #ffb700;
}

.rating-score {
  color: #666;
}

.sales-count {
  color: #999;
  font-size: 12px;
}

.product-price {
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-price {
  color: #ff4400;
  font-size: 20px;
  font-weight: 700;
}

.original-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.add-to-cart-button {
  margin: 0 12px 12px;
  padding: 10px 0;
  background: #ff4400;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.add-to-cart-button:hover {
  background: #ff6600;
}

/* 收藏按钮样式 */
.favorite-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorite-button:hover {
  background: white;
  transform: scale(1.1);
}

.favorite-button.favorited {
  background: rgba(255, 68, 0, 0.8);
  color: white;
}

.favorite-button.favorited:hover {
  background: #ff4400;
}

/* 商品操作按钮容器 */
.product-actions {
  display: flex;
  gap: 8px;
  margin: 0 12px 12px;
}

.product-actions .add-to-cart-button {
  flex: 1;
  margin: 0;
}

/* 底部收藏按钮 */
.favorite-btn {
  flex: 1;
  padding: 10px 0;
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.favorite-btn:hover {
  background: #ffeeee;
  border-color: #ff6666;
  color: #ff4444;
}

.favorite-btn.favorited {
  background: #fff5f5;
  color: #ff4400;
  border-color: #ff4400;
}

.favorite-btn.favorited:hover {
  background: #ffe0e0;
}

/* 购物车侧边栏 */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  transition: right 0.3s;
  display: flex;
  flex-direction: column;
}

.cart-sidebar.open {
  right: 0;
}

.cart-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.close-cart {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.close-cart:hover {
  background: #f5f5f5;
  color: #333;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-cart {
  text-align: center;
  color: #999;
  padding: 40px 0;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-price {
  color: #ff4400;
  font-weight: 600;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-item-quantity button {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.cart-item-quantity button:hover {
  background: #f5f5f5;
  border-color: #ff4400;
}

.cart-item-quantity span {
  min-width: 20px;
  text-align: center;
}

.cart-footer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
}

.cart-total {
  color: #ff4400;
  font-weight: 700;
  font-size: 24px;
}

.checkout-button {
  width: 100%;
  padding: 14px 0;
  background: #ff4400;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.checkout-button:hover:not(:disabled) {
  background: #ff6600;
}

.checkout-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.cart-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* 页脚 */
.mall-footer {
  background: #f5f5f5;
  padding: 40px 0;
  border-top: 1px solid #e0e0e0;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #ff4400;
}

.footer-bottom {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

/* Toast提示 */
.mall-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1200;
}

.mall-toast.show {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .banner-text h2 {
    font-size: 36px;
  }
  
  .banner-text p {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .header-main {
    flex-direction: column;
    gap: 20px;
  }
  
  .search-box {
    width: 100%;
    margin: 0;
  }
  
  .category-item {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .banner-text h2 {
    font-size: 28px;
  }
  
  .banner-text p {
    font-size: 16px;
  }
  
  .cart-sidebar {
    width: 100%;
    right: -100%;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
  
  .logo {
    font-size: 24px;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .banner-text {
    left: 5%;
  }
  
  .footer-links {
    grid-template-columns: 1fr;
  }
}
</style>